
<template>
  <div ref="boxwrap" class="AlertsInfo scroll">
    <vue-seamless-scroll :data="resData" :class-option="defaultOption">
      <ul>
        <li v-for="(item, index) in resData" ref="liDom" :key="'item.devName' + index">
          {{ item.alTime | parseTime('{h}:{i}') }} {{ item.lineName }}{{ item.devName }} <em>{{ item.alMessage }}</em>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { getAlertsInfo } from '@/api/screen'
export default {
  name: 'AlertsInfo',
  components: {
    vueSeamlessScroll
  },
  props: {
    width: {
      type: String,
      default: '150px'
    },
    height: {
      type: String,
      default: '150px'
    },
    isresize: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chartStyle: {
        width: '100%',
        height: '100%'
      },
      resData: [],
      defaultOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 500 // 单步运动停止的时间(默认值1000ms)
      },
      currentView: {},
      timer: null,
      refreshInterval: 1000 * 3
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'regionid',
  //     'lineId'
  //   ])
  // },
  watch: {
    width: {
      immediate: true,
      handler: function(newval, oldval) {
        this.width = newval
      },
      deep: true
    },
    height: {
      immediate: true,
      handler: function(newval, oldval) {
        this.height = newval
      },
      deep: true
    },
    isresize(newval, oldval) {
      this.movement = newval
      // this.chart.resize()
    }
  },
  mounted() {
    this.getDomHeight()
    this.domResize()
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  created() {
    this.getCurrentView()
    if (this.$route.path.indexOf('/screen') !== -1) {
      this.dataRefresh()
    }
  },
  methods: {
    getDomHeight() {
      this.chartStyle = {
        width: this.$refs.boxwrap.clientWidth + 'px',
        height: this.$refs.boxwrap.clientHeight + 'px'
      }
    },
    domResize() {
      const that = this
      // 引入 插件
      var elementResizeDetectorMaker = require('element-resize-detector')
      var erd = elementResizeDetectorMaker()
      const dom = this.$refs.boxwrap
      erd.listenTo(dom, function(element) {
        var width = element.clientWidth + 'px'
        var height = element.clientHeight + 'px'
        that.chartStyle = {
          width,
          height
        }
      })
    },
    getCurrentView() {
      this.currentView = {
        regionid: this.$Cookies.get('currentReginid'),
        lineId: this.$Cookies.get('currentLineId')
      }
      this.getData()
    },
    getData() {
      getAlertsInfo(this.currentView).then(response => {
        this.resData = response.data
      })
    },
    dataRefresh() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.getData()
        this.dataRefresh()
      }, this.refreshInterval)
    }
  }
}
</script>
<style lang="scss">
.AlertsInfo{
  font-size: 14px;
  overflow: hidden;
  padding: 5px 10px;

  ul{
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    li{
      width: 100%;
      margin-bottom: 10px;
      box-sizing: border-box;

      span{
        display: inline-block;
        width: 30px;
        text-align: center;
        margin-right: 5px;
        border: 1px solid red;
      }

      em{
        color: red;
        font-style: normal;
      }
    }
  }
}

</style>
